<template>
  <el-select
    v-model="schoolId"
    placeholder="请选择学校"
    clearable
    filterable
    remote
    :remote-method="remoteMethod"
    @focus="focus"
    @change="change"
    :loading="loading"
    v-loadmore="loadmore"
  >
    <el-option
      v-for="item in schoolList"
      :key="item.is"
      :label="item.sname"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>
<script>
import { listSchool } from '@/api/curriculumSystemManagement/school'

export default {
  name: 'selectSchool',
  props: {
    sID: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      schoolId: null,
      //学校下拉框数据
      schoolList: [],
      queryParames: {
        pageNum: 1,
        pageSize: 10,
        sname: ''
      },
      schoolTotal: 10,
      loading: false
    }
  },
  created() {
    this.getSchoolList()
  },
  methods: {
    /** 下拉框选中值发生改变*/
    change(e) {
      this.$emit('selectChange', e)
    },
    /** 下拉框搜索*/
    async remoteMethod(query) {
      const self = this
      self.queryParames.sname = query
      self.loading = true
      self.schoolList = []
      self.queryParames.pageNum = 1
      await self.getSchoolList()
      self.loading = false
    },
    /** 下拉框触底*/
    loadmore() {
      const self = this
      if (!self.loading) {
        self.queryParames.pageNum++
        self.getSchoolList()
      }
    },
    /** 下拉框获取焦点时*/
    async focus () {
      const self = this
      self.loading = true
      self.schoolList = []
      self.queryParames.pageNum = 1
      self.schoolTotal = 10
      await self.getSchoolList()
      self.loading = false
    },
    /** 获取学校下拉框数据*/
    async getSchoolList() {
      const self = this
      if (self.schoolList.length >= self.schoolTotal) {
        self.loading = false
        return
      }
      const response = await listSchool(self.queryParames)
      self.schoolList = self.schoolList.concat(response.rows)
      self.schoolTotal = response.total
    }
  }
}
</script>
<style scoped lang="scss">

</style>
